<template>
  <div>
    <div class="header_wrap">
      <div class="header_left">
        程序员：{{userInfo.nickname}}
      </div>
      <div class="header_right">
        <!-- 下拉菜单 -->
       <el-dropdown @command="hadleChange">
          <span class="el-dropdown-link">
            <img :src="userInfo.user_pic" alt="">
            <el-icon class="el-icon--right">
              <CaretBottom />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="profile">
                  <CaretBottom /> 基本资料
              </el-dropdown-item>
              <el-dropdown-item command="avator">更换头像</el-dropdown-item>
              <el-dropdown-item command="pass">重置密码</el-dropdown-item>
              <el-dropdown-item command="quit">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
       
      </div>
    </div>
  </div>
</template>

<script setup>
  import {CaretBottom}  from '@element-plus/icons-vue'
  import {userGetInfoService} from '@/api/use.ts'
  import {ref} from 'vue'
  import {userStore} from '@/store/user.js'
  import {useRouter} from 'vue-router'
  import mitt from '@/utils/mitt'
import { tokenStore } from '@/store/token';
  let uStore=userStore(); //调用pinia导入的函数
  let tStore=tokenStore();
  let router=useRouter()
  // 获取用户信息接口
    let userInfo=ref({})
      let getUser=async ()=>{
        let res=await userGetInfoService();
        console.log(res,"-------8888------");
         userInfo.value=res.data; 
        //  调用pinia中的actions方法 并存储当前接口返回的用户信息数据
         uStore.changeUser(res.data)
      }
      
        getUser();
      // 监听其他组件的传值  重新获取用户信息

        mitt.on('senduser',()=>{

            getUser();
        })
        // 下拉菜单的选择事件
        let hadleChange=(item)=>{
          console.log(item,"9999999999999999")
          if(item=='profile'){ //去基本资料
              router.push("/layout/baseuser")
          }
          if(item=='avator'){ //去头像
               router.push("/layout/useravator")
          }
          if(item=='pass'){ //去修改密码
                  router.push("/layout/editpass")
          }
          if(item=='quit'){ //退出登录
            tStore.setToken('')
            localStorage.mytoken=""
            router.push("/login")
          } 
        }
</script>
<style lang="scss">
    .header_wrap{
      display:flex;
      width:100%;
      justify-content:space-between;
      align-items:center;
      box-sizing:border-box;
      padding:0 50px;
      .header_right{
        img{
          width:60px;
          height:60px;
          border-radius:50%;
          vertical-align:middle;
        }
      }
    }
</style>
